<template>
  <div class="prductWater">
  <img src="./../assets/product/pCarousel.png" alt="pCarousel" class="pCarousel">
      <h3 class="title">PRODUCT</h3>
      <p class="brif">{{content.title}}</p>
    <div class="content">
      <div class="top">
        <div>
          <img src="./../assets/product/productWater.png" alt="productWater" class="pw">
          <span class="jj">简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介</span>
          <p>净水机型号</p>
        </div>
        <div>
          <img src="./../assets/product/productWater.png" alt="productWater" class="pw">
          <span class="jj">简介</span>
          <p>净水机型号</p>
        </div>
        <div>
          <img src="./../assets/product/productWater.png" alt="productWater" class="pw">
          <span class="jj">简介</span>
          <p>净水机型号</p>
        </div>
      </div>
      <div class="bottom">
        <div>
          <img src="./../assets/product/productWater.png" alt="productWater" class="pw">
          <span class="jj">简介</span>
          <p>净水机型号</p>
        </div>
        <div>
          <img src="./../assets/product/productWater.png" alt="productWater" class="pw">
          <span class="jj">简介</span>
          <p>净水机型号</p>
        </div>
        <div>
          <img src="./../assets/product/productWater.png" alt="productWater" class="pw">
          <span class="jj">简介</span>
          <p>净水机型号</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import jQuery from 'jquery'
  export default {
    data () {
      return {
        content:[]
      }
    },
    methods : {
      show () {
        jQuery("span.jj").hide();
        jQuery(".top > div").hover(function(){
          jQuery("span.jj",this).slideToggle(500);
          jQuery("img",this).animate({
            opacity: 0.1
          },1,function(){
              jQuery(".top > div").mouseleave(function(){
                jQuery("img",this).animate({
                  opacity: 1
                },1)
              })
          });
        });
        jQuery(".bottom > div").hover(function(){
          jQuery("span.jj",this).toggle();
          jQuery("img",this).animate({
            opacity: 0.1
          },1,function(){
              jQuery(".bottom > div").mouseleave(function(){
                jQuery("img",this).animate({
                  opacity: 1
                },1)
              })
          });
        });
      },
      getData () {
        this.$http({
          url: `http://localhost:2000/getjson${this.$route.path}`,
          method: 'get'
        }).then((res) => {
          this.content = res.data;
          console.log(this.$route.path)
        }).catch((res) => {
          console.log('error:', res)
        })
      }
    },
    beforeRouteUpdate(to, from, next) {
        this.$http({
            url: `http://localhost:2000/getjson${to.path}`,
            method: 'get',
        }).then((res) => {
            this.content = res.data;
        }).catch((res) => {
            console.log('error: ', res);
        });
        next();
    },
    mounted() {
      this.show();
      this.getData();
    }
  }
</script>

<style scoped>
.pw {
  width: 17rem;
  height: 22rem;
}
.pCarousel {
  width: 100%;
}
.content {
  display: flex;
  flex-direction: column;
}
.top, .bottom {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4rem;
}
.top > div, .bottom > div {
  position: relative;
  box-shadow: 0 0 5px #888888;
  margin: 0 1rem;
}
/*.content img:hover {
  opacity: 0.2;
}*/
.top > div > img, .bottom > div> img {
  width: 100%;
}
.top > div > p, .bottom > div> p {
  display: block;
  font-size: 0.9rem;
  margin: 0.7rem;
  text-align: center;
}
.jj {
  /*width: 17rem;
  height: 22rem;*/
  position: absolute;
  top: 0;
  left: 0;
  padding: 3rem 2rem;
  display: none;
  font-weight: 700;
}

</style>
